<script setup>
import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import {
  getHouseFundWithdrawal,
  getHouseGuaranteePersonnel,
} from '../api.js'
import sel from '@/assets/imgs/sjz_d_sel.png'
import nor from '@/assets/imgs/sjz_d_nor.png'
import icon_house from '@/assets/imgs/bt_sy.png'
import icon_person from '@/assets/imgs/ic_rygj.png'

const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

// '柏梓镇','宝龙镇','别口镇','崇龛镇','古溪镇','花岩镇','龙形镇','米心镇','双江镇','寿桥镇','太安镇','塘坝镇','卧佛镇','五桂镇','小渡镇','新胜镇','玉溪镇','上和镇','群力镇','田家镇'
const getChartLineOption = (data) =>{
  return {
    grid: {
      top: '25%',
      left: '13%',
      bottom: '16%',
      right: '3%',
      showMaxLabel: true,
    },
    legend: {
      show: true,
      right: 'center',
      itemWidth: 6,
      itemHeight: 6,
      width: '100%',
      textStyle: {
        color: '#b4d3ed',
        fontSize: 11,
      },
    },
    xAxis: {
      data: data.xAxis.map((e) => e + '月'),
      // axisLabel: {
      //   showMaxLabel: true,
      //   textStyle: {
      //     color: '#ffffff',
      //     fontSize: 9,
      //   },
      //   padding: [3, 0, 0, 0],
      // },
      // axisLine: {
      //   show: true,
      //   lineStyle: {
      //     color: 'rgb(64,77,93)',
      //     width: 1,
      //   },
      // },
      // axisTick: {
      //   show: false,
      //   lineStyle: {
      //     color: 'rgb(64,77,93)',
      //   },
      // },
      // splitLine: {
      //   show: false,
      // },
    },
    yAxis: [
      {
        name: '万元',
        type: 'value',
        position: 'left',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#b4d3ed',
            fontSize: 12,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#b4d3ed',
            width: 1,
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: data.reList.map((item, i) => {
      return {
        name: item.name,
        type: 'line',
        // smooth: true,
        showBackground: false,
        label: {
          // 数据标签配置
          show: false, // 显示标签
          position: 'top', // 标签位置（top/inside/outside等）
          formatter: '{c}', // 显示数据值（{c} 代表数据值）
          fontSize: 15,
        },
        itemStyle: {
          color: ['#00CDFC', '#08ECBE', '#FFA8A7'][i],
        },
        data: item.value,
      }
    }),
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  }
}

const getChartPieOption = ({ list, image }) => {
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{b} <br/> {c} ({d}%)'
    },
    // legend: {
    //   data: [
    //     '0-17岁',
    //     '18-45岁',
    //     '46-59岁',
    //     '60岁以上',
    //   ]
    // },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['32%', '46%'],
        padAngle: 3, // 轻微的角度间隙
        labelLine: {
          length: 10
        },
        inverse: true,
        label: {
          formatter: '{b|{b}}\n{hr|}\n{c|{c}} {unit|户}  {per|{d}%}  ',
          // backgroundColor: '#F6F8FC',
          // borderColor: '#8C8D8E',
          // borderWidth: 1,
          // borderRadius: 4,
          rich: {
            b: {
              color: '#ffffff',
              fontSize: 14,
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            c: {
              color: '#ffffff',
              fontSize: 14,
              lineHeight: 28
            },
            unit: {
              color: '#ccc',
              fontWeight: 'normal',
            },
            per: {
              color: '#ffffff',
              lineHeight: 28
              // backgroundColor: '#4C5058',
              // padding: [3, 4],
              // borderRadius: 4
            }
          }
        },
        data: list,
      }
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    // 添加 graphic 组件显示图片
    graphic: {
      elements: [{
        type: 'image',
        key: 'centerImage',
        z: 100,
        style: {
          image: image, // 你的图片路径
          width: 50,
          height: 50
        },
        left: 'center',
        top: 'center'
      }]
    },
  }
}

const nonHouseChartLineRef = ref(null)
const houseChartLineRef = ref(null)
const updateDataHouse = (data) => {
  houseChartLineRef.value?.updateOption(getChartLineOption(data))
}

const securityPersonChartPieRef = ref(null)
const updateChartPieSacurityPerson = (data) => {
  securityPersonChartPieRef.value?.updateOption(getChartPieOption({ list: data.reList, image: icon_person }))
}

const activeTab_2 = ref('公租房')
const activeTab_3 = ref('各年龄')

const updateChartLine_2 = () => {
  getHouseFundWithdrawal({ type: activeTab_2.value })
    .then(res => {
      if (res.success) {
        updateDataHouse(res.data)
      }
    })
}
const updateChartPie = () => {
  getHouseGuaranteePersonnel({ type: activeTab_3.value })
   .then(res => {
    if (res.success) {
      updateChartPieSacurityPerson(res.data)
    }
   })
}
const onChangeTab = (activeName, type) => {
  if (type === '2') {
    activeTab_2.value = activeName
    updateChartLine_2(activeName)
  } else {
    activeTab_3.value = activeName
    updateChartPie(activeName)
  }
}

const overviewInfo = ref([
  {
    title: '应收总额',
    value: 17772,
    unit: '万元',
    img: sel,
  },
  {
    title: '已缴总额',
    value: 10790,
    unit: '万元',
    img: nor,
  }
])

const updateDataNonHouse = (data) => {
  console.log('updateDataNonHouse', data)
  overviewInfo.value[0].value = data['应收总额']
  overviewInfo.value[1].value = data['已缴总额']
  nonHouseChartLineRef.value?.updateOption(getChartLineOption(data))
}

const reqData = () => {
  // setTimeout(() => {
  //   updateChartPieSacurityPerson()
  // }, 50)

  Promise.all([
    getHouseFundWithdrawal({ type: '非住宅' }),
    getHouseFundWithdrawal({ type: activeTab_2.value }),
    getHouseGuaranteePersonnel({ type: activeTab_3.value })
  ])
  .then(([nonHouseRes, houseRes, houseGuaranteePersonnel]) => {
    if (nonHouseRes.success) {
      updateDataNonHouse(nonHouseRes.data)
    }
    if (houseRes.success) {
      updateDataHouse(houseRes.data)
    }
    if (houseGuaranteePersonnel.success) {
      updateChartPieSacurityPerson(houseGuaranteePersonnel.data)
    }
  })
}


onMounted(async () => {
  reqData()
  // setTimeout(() => {
  //   updateChart()
  // }, 300)
})
onBeforeUnmount(() => {
  
})
</script>

<template>
  <div :class="['right', isExpanded ? 'active' : '']">
    <card name="租金回笼情况" class="rent-collection">
      <div class="my-tabs">
        <div class="before dots">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </div>
        <div class="tabs">
          <div class="tab-item on">非住宅</div>
        </div>
        <div class="after dots">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </div>
      </div>
      <div class="overview-wrap">
        <div class="overview-box" v-for="(item, i) in overviewInfo">
          <div class="icon-wrap">
            <img :src="item.img" alt="">
          </div>
          <div class="right">
            <div>
              <span class="overview-value">{{ item.value }}</span>
              <span class="overview-unit">{{ item.unit }}</span>
            </div>
            <div class="overview-title">{{ item.title }}</div>
          </div>
        </div>
      </div>

      <div class="chart">
        <draw-echarts
          ref="nonHouseChartLineRef"
          width="420"
          height="190"
          :options="{}"
        ></draw-echarts>
      </div>

      <div class="my-tabs">
        <div class="before dots">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </div>
        <div class="tabs">
          <div class="tab-item" :class="{ on: activeTab_2 == '公租房' }" @click="onChangeTab('公租房', '2')">公租房</div>
          <div class="tab-item" :class="{ on: activeTab_2 == '人才房' }" @click="onChangeTab('人才房', '2')">人才房</div>
        </div>
        <div class="after dots">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </div>
      </div>
      <div class="chart">
        <draw-echarts
          ref="houseChartLineRef"
          width="420"
          height="190"
          :options="{}"
        ></draw-echarts>
      </div>
    </card>
    <card name="保障人员" class="security-people">
      <div class="my-tabs">
        <div class="before dots">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </div>
        <div class="tabs">
          <div class="tab-item" :class="{ on: activeTab_3 == '各年龄' }" @click="onChangeTab('各年龄', '3')">
            各年龄入驻人员
          </div>
          <div class="tab-item" :class="{ on: activeTab_3 == '各性别' }" @click="onChangeTab('各性别', '3')">
            各性别入驻人员
          </div>
          <div class="tab-item" :class="{ on: activeTab_3 == 'A/B类' }" @click="onChangeTab('A/B类', '3')">
            A/B类入驻人员
          </div>
        </div>
        <div class="after dots">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </div>
      </div>
      <div class="chart">
        <draw-echarts
          ref="securityPersonChartPieRef"
          width="420"
          height="230"
          :options="{}"
        ></draw-echarts>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
@import '@/assets/styles/my-tabs.scss';
.right {
  .rent-collection {
    height: 600px;
    margin-bottom: var(--card-margin-bottom);
    color: #eee;

    .overview-wrap {
      display: flex;
      margin-bottom: 10px;

      .overview-box {
        flex: 1;
        display: flex;
        align-items: center;
        .icon-wrap {
          flex: 0 0 70px;
          height: 70px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          text-align: center;
          // background-image: url(/src/assets/imgs/house_rent_bg.png);
          // background-repeat: no-repeat;
          // background-size: 100% 100%;
        }

        .overview-value {
          font-size: 22px;
          font-weight: bold;
          color: #fff;
        }
        .overview-unit {
          font-size: 14px;
          color: #aaa;
          margin-left: 3px;
        }
        .overview-title {
          margin-top: 6px;
          font-size: 14px;
          color: #ccc;
        }
      }
    }
  }

  .security-people {
    height: 260px;
    margin-bottom: var(--card-margin-bottom);
    color: #fff;
    .box-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .box-item {
        width: 45%;
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        margin-left: 10px;

        .box-item-img {
          width: 80px;
          height: 80px;
          img {
            object-fit: contain;
            width: 100%;
            height: 100%;
          }
        }
        .box-item-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          color: #ccc;
          font-size: 14px;
          .box-item-right-title {
            width: 70%;
          }
          .box-item-right-value {
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            
            .box-item-right-num {
              font-family: Source Han Sans SC;
              font-weight: bold;
              font-size: 24px;
              color: #fff;
            }
            .box-item-right-unit {
              color: #979797;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
